<template>
  <div class="avatar" @click="hanleLogout">
    <el-avatar :src="avatarUrl"></el-avatar>
  </div>
</template>
<script>
import Api from "../api";

export default {
  data() {
    return {
      avatarUrl:
        localStorage.getItem("avatar") ||
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    };
  },
  methods: {
    hanleLogout() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await Api.apiLogout();
          if (res.code === 1) {
            //   退出登录成功
            // 1. 先清空所有的存储数据
            localStorage.clear();
            // 2.通知用户退出成功
            this.$message({
              type: "success",
              message: "退出成功!",
            });
            // 3. 退出到登录页面,
            this.$router.replace({
              path: "/login",
            });
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.avatar {
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-32%);
  cursor: pointer;
}
</style>
